<template>
  <el-row justify="space-around">
    <!-- 平台人数 -->
    <el-col :span="5">
      <div class="b1">
        <el-icon size="40"><UserFilled /></el-icon>
        <div class="b2">
          <span>平台人数</span>
          <span>{{ users.length }}</span>
        </div>
      </div>
      <div class="c1">
        <span style="color: #49cbff">认证用户-{{ vipnum }}%</span
        ><span style="color: #888">{{ 100 - vipnum }}%-普通用户</span>
      </div>
      <div class="c2">
        <el-progress
          :text-inside="true"
          :stroke-width="5"
          :percentage="vipnum"
          :show-text="false"
          color="#49cbff"
        />
        <!-- :striped="true" :striped-flow="true" -->
      </div>
    </el-col>
    <!-- 成交金额 -->

    <el-col :span="5">
      <div class="b1">
        <el-icon style="background-color: #fcf3c1" size="40"
          ><Coin style="color: #fcbe00"
        /></el-icon>
        <div class="b2">
          <span>预计成交金额</span>
          <span>￥{{ price.toFixed(2) }}</span>
        </div>
      </div>
      <div class="d1">
        <span style="color: #f50026; font-weight: 800">
          <span class="iconfont icon-xia"></span> 3.56% &nbsp;</span
        ><span>since last week</span>
      </div>
      <div class="c2">
        <el-progress
          :text-inside="true"
          :stroke-width="5"
          :percentage="80"
          :show-text="false"
          color="#fcbe00"
        />
      </div>
    </el-col>

    <!-- 订单量 -->
    <el-col :span="5">
      <div class="b1">
        <el-icon style="background-color: #c5ffd5" size="40">
          <Document style="color: #00ff67"
        /></el-icon>
        <div class="b2">
          <span>订单量</span>
          <span>{{ allOder.length }}</span>
        </div>
      </div>
      <div class="d1">
        <span style="color: #00e361; font-weight: 800"
          ><span class="iconfont icon-shang"></span> 2.37% &nbsp;</span
        ><span>since last week</span>
      </div>
      <div class="c2">
        <el-progress
          :text-inside="true"
          :stroke-width="5"
          :percentage="66"
          :show-text="false"
          color="#00ff67"
        />
      </div>
    </el-col>
    <!-- 未收养动物 -->
    <el-col :span="5">
      <div class="b1">
        <el-icon style="background-color: #ffb5ff" size="40">
          <Star style="color: #ff00ff"
        /></el-icon>
        <div class="b2">
          <span>未收养动物</span>
          <span>{{ allpet.length }}</span>
        </div>
      </div>
      <div class="d1">
        <span style="color: #00e361; font-weight: 800">
          <span class="iconfont icon-xia"></span> 1.79% &nbsp;</span
        ><span>since last week</span>
      </div>
      <div class="c2">
        <el-progress
          :text-inside="true"
          :stroke-width="5"
          :percentage="33"
          :show-text="false"
          color="#ff00ff"
        />
      </div>
    </el-col>
  </el-row>
</template>
  
<script setup>
import { ref } from 'vue'
import axios from '@/utils/api'
// import { color } from 'echarts'
const users = ref([])
let vipUser = ref([])
let vipnum = ref(0)
let allpet = ref([])

const userlist = () => {
  return axios.post('http://localhost:3000/login/userlist')
}

// 查看所有的领养信息
const getPets = () => {
  return axios.get('http://localhost:3000/api/pets')
}

getPets().then((res) => {
  // console.log('abc',res.data.findResAll)
  allpet.value = res.data.findResAll
})

userlist().then((res) => {
  users.value = res.data.userAll
  vipUser = users.value.filter((user) => user.usertype === 'vip')
  vipnum.value = Math.floor((vipUser.length / users.value.length) * 100)
  // console.log('555', users.value.length, vipUser.length, vipnum.value)
})

const Order = () => {
  return axios.post('http://localhost:3000/api/order')
}

let allOder = ref([])
let price = ref(0)
Order().then((res) => {
  allOder.value = res.data.orderResult
  console.log('allOder', allOder.value)
  allOder.value.forEach((item) => {
      price.value += item.totalAmount 
  // console.log('item.totalAmount', item.totalAmount)

  })
})
</script>
  <style scoped lang="less">
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  padding: 18rem 18rem 10rem 18rem;
  border-radius: 4px;
  background-color: white;
  .b1 {
    display: flex;
    .el-icon {
      padding: 8rem;
      background: #d1f4ff;
      border-radius: 10rem;
      overflow: hidden;
      color: #49cbff;
    }
    .b2 {
      font-size: 10rem;
      margin-left: 16rem;
      display: flex;
      align-items: start;
      justify-content: space-around;
      flex-flow: column;
    }
  }
  .d1 {
    font-size: 8.8rem;
    margin-top: 10rem;
  }
  .c1 {
    font-size: 8.8rem;
    margin-top: 10rem;
    display: flex;
    justify-content: space-between;
  }
  .c2 {
    margin-top: 10rem;
  }
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

@font-face {
  font-family: 'iconfont'; /* Project id 4804949 */
  src: url('//at.alicdn.com/t/c/font_4804949_xyehk732f8g.woff2?t=1736235001867') format('woff2'),
    url('//at.alicdn.com/t/c/font_4804949_xyehk732f8g.woff?t=1736235001867') format('woff'),
    url('//at.alicdn.com/t/c/font_4804949_xyehk732f8g.ttf?t=1736235001867') format('truetype');
}

.iconfont {
  font-family: 'iconfont' !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-shang:before {
  content: '\e6f4';
}

.icon-xia:before {
  content: '\e6f5';
}
</style>
  